<template>
	<a-modal title="发货明细单" :width="1200" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit"
		@cancel="handleCancel">
		<a-card :bordered="false">

			<a-form :form="form">
				<a-form-item label="发货单号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input v-decorator="['orderNumber', { rules: [{ required: true, message: '请输入发货单号！' }] }]" />
				</a-form-item>
				<a-form-item label="发货备注" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input v-decorator="['remark', { rules: [{ required: true, message: '请输入发货备注！' }] }]" />
				</a-form-item>
				<a-form-item label="发货凭证" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input v-decorator="['file', { rules: [{ required: true, message: '请输入发货凭证！' }] }]" v-show="false" />
					<FcUpload :file-list="fileList" @change="(value) => form.setFieldsValue({ file: value })" />
				</a-form-item>
				<a-form-item label="发货方式" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input placeholder="请输入" v-decorator="['delivery', { rules: [{ required: true, message: '请输入发货方式！' }] }]" />
				</a-form-item>
			</a-form>

			<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true"
				:rowKey="(record) => record.code" :rowSelection="null" :showPagination="false">

				<template slot="thisCompleteNumber" slot-scope="text, record">
					<a-input-number v-model:value="record.thisCompleteNumber" :step="1" :min="0"
						:max="record.number - record.deliveredNumber" style="width: 67px;"
						:disabled="record.number - record.deliveredNumber <= 0" />
				</template>
				<template slot="materialType" slot-scope="text, record">
						
				</template>
			</s-table>
		</a-card>

	</a-modal>
</template>

<script>
import { STable } from '@/components'
import {
	page,
	editInfo,  //编辑明细
} from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage'
import FcUpload from '@/components/FCUpload/FcUploadPDF'

export default {
	components: {
		FcUpload,
		STable,
	},

	data: function () {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 3 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 18 }
			},
			form: this.$form.createForm(this),
			advanced: false, // 高级搜索 展开/关闭
			queryParam: {},  // 查询参数
			columns: [
				{
					title: '产品编号',
					dataIndex: 'materialCode'
				},
				{
					title: '产品名称',
					dataIndex: 'materialName'
				},
				{
					title: '发货数量',
					dataIndex: 'number',
				},
				{
					title: '类型',
					dataIndex: 'materialType',
					customRender: (text, record, index) => Object.values(this.$businessEnum.MATERIAL_TYPE_ENUM).find((obj) => obj.id === text).name
					// scopedSlots: { customRender: 'materialType' }
				},
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				return page(Object.assign(parameter, this.queryParam)).then((res) => {
					res.data.rows.forEach(value => {
						value.thisCompleteNumber = 0
					})
					return res.data
				})
			},
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			visible: false,
			confirmLoading: false,
			emsOrder: null,
			viewState: '',
			extra: {},
			fileList: [],
			orderId: '',
		}
	},
	computed: {},
	methods: {
		show(record) {
			this.visible = true
			this.emsOrder = record
			this.orderId = record.orderId
			this.queryParam = {}
			this.queryParam.orderId = this.orderId
			this.queryParam.pageSize = -1

			setTimeout(() => {
				this.form.resetFields()
				this.form.setFieldsValue(record)
				this.fileList = record.file.split(',').map(fileID => {
					return {
						uid: fileID,
						name: fileID,
						status: 'done',
						url: this.$util.formatImageUrl(fileID),
						fileID: fileID
					}
				})
				this.handleOk()
				this.$refs.table.clearSelected()
			}, 100)
		},
		handleSubmit() {
			const { form: { validateFields } } = this
			this.confirmLoading = true
			validateFields((errors, values) => {
				this.confirmLoading = false
				if (!errors) {
					let query = {
						...values,
						orderId: this.orderId,
					}
					editInfo(query).then((res) => {
						this.confirmLoading = false
						if (res.success) {
							this.$message.success('编辑成功')
							this.handleCancel()
							this.$emit('ok')
						} else {
							this.$message.info('编辑失败：' + res.message)
						}
					}).finally((res) => {
						this.confirmLoading = false
					})
				} else {
					this.confirmLoading = false
				}
			})
		},
		toggleAdvanced() {
			this.advanced = !this.advanced
		},
		handleOk() {
			this.$refs.table.refresh()
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
		handleCancel() {
			this.visible = false
		},
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
